<template>
    <section class="after-sale-sub-main base-main">
      <!--商品信息-->
      <AfterTypePorduct :product="product"></AfterTypePorduct>
      <!--商品信息-->

      <!--退款原因-->
      <van-cell class="mt10" value="请选择" is-link @click="handleReason">
        <template solt="title">
          <span>{{reasonText}}</span>
        </template>
      </van-cell>
      <!--退款原因-->

      <van-cell class="mt10">
        <template slot="title">
          <span class="custom-text">退款金额：<span class="colorF54E4E">￥80.00</span></span>
        </template>
      </van-cell>

      <p class="remind color7A7B82 fs14 pdlr15">
        最多￥80.00 以双方协商结果为准
      </p>

      <van-field
        v-model="explain"
        label="退款说明："
        placeholder="选填"
      />

      <!--凭证-->
      <div class="voucher-box mt10 pdlr15">
        <p class="head fs14 color45454D">
          退款凭证：
        </p>

        <!--图片凭证-->
        <div class="pic-box">
          <span
            class="pr inline-block img-box"
            v-for="(item,index) in imgList" :key="index"
            :class="(index == imgList.length -1) ? 'mr0' : ''"
          >
            <img :src="item" alt="" @click="handleImgPreview(index)">
            <van-icon
              class="close-btn inline-block pa fs20" name="clear"
              @click="handleDel(index)"/>
          </span>

          <!--上传按钮-->
          <van-uploader
            v-if="imgList.length < 4"
            :class="imgList.length > 0 ? 'ml10' : ''"
            class="uploader-box text-c"
            :after-read="onRead"
            multiple>
            <i class="iconfont iconshumajiadian"></i>
            <p class="fs10"> 添加凭证 </p>
            <p class="fs10"> 最多4张 </p>
          </van-uploader>
          <!--上传按钮-->
        </div>
        <!--图片凭证-->

      </div>
      <!--凭证-->

      <p class="btn pa">
        <span class="base-btn-refund">提交</span>
      </p>

      <div class="cancel-order-box">
        <van-popup
          v-model="isShowPop"
          position="bottom"
          @click-overlay="closePop">
          <div class="cancel-box pr">
            <p class="title text-c line-bottom color7A7B82">
              {{reasonText}}
              <i class="pa iconfont iconcha" @click="isShowPop=false"></i>
            </p>
            <div class="reason-list">
              <van-checkbox-group v-model="result">
                <van-cell
                  v-for="(item,index) in reasonList"
                  :key="index"
                  :title="item.text"
                  @click="toggle(index)">
                  <van-checkbox :name="item.id" ref="checkboxes" />
                </van-cell>
              </van-checkbox-group>
            </div>

            <div class="btn text-c pa bgcFFF">
              <span class="base-btn" @click="handleSub">确定</span>
            </div>
          </div>
        </van-popup>
      </div>

      <Loading :show="isLoading"></Loading>
    </section>
</template>

<script type="text/ecmascript-6">
  import AfterTypePorduct from '../../components/AfterTypePorduct'
  import Loading from '../../components/Loading.vue'

  import { ImagePreview } from 'vant';

  export default {
    components:{
      AfterTypePorduct,Loading
    },
    data() {
      return {
        isLoading:false,
        result:[],
        product:{
          path:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=138126325,1485620701&fm=85&s=7FAB2EC3909A35D01E299C1A030010D2',
          name:'商品名称',
          model:'7332',
          number:2
        },//商品信息
        explain:'',//退款说明
        imgList:[],//凭证数组
        reasonText:'',//文案
        isShowPop:false,//售后原因弹窗
        reasonList:[
          {
            id:1,
            text:'拍错了，重新拍'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:3,
            text:'卖家缺货'
          },
          {
            id:4,
            text:'其他原因'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
        ],
      }
    },
    watch:{
      'imgList':function(newVal,oldVal){
        this.$nextTick(function(){
          $('.img-box img').css('height',$('.img-box img').width())
        })
      }
    },
    created(){
      if(this.$route.query.type == 0){
        console.log('00');
        this.reasonText = '退款原因'
//        this.$route.meta.title = '申请退款'
      }else if(this.$route.query.type == 1){
        console.log('11');
        this.reasonText = '退货原因'
//        this.$route.meta.title = '申请退货退款'
      }else if(this.$route.query.type == 2){
        console.log('22');
        this.reasonText = '退款原因'
//        this.$route.meta.title = '申请换货'
      }
      this.$nextTick(function(){
        $('.uploader-box').css('height',$('.uploader-box').width())
      })
    },
    methods: {
      onRead(file) {
//        console.log(file)
        if(this.imgList.length < 4){
          this.imgList.push(file.content)
        }
      },
      //预览
      handleImgPreview(index){
        ImagePreview({
          images: this.imgList,
          startPosition: index,
          onClose() {
            // do something
          }
        });
      },
      //删除
      handleDel(index){
        this.$dialog.confirm({
          title: '删除',
          message: '确定删除这张图片吗？'
        }).then(() => {
          this.imgList.splice(index,1);
          this.$toast('删除成功')
        }).catch(() => {
        });
      },
      //退货原因弹窗显示
      handleReason(){
        this.isShowPop = true
        console.log(this.isShowPop);
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
        console.log(this.result);
      },
      closePop(){
        this.isShowPop = false
      },
      //退货原因
      handleSub(){
        if(this.result.length <= 0){
          this.$toast('请选择理由后再确定')
        }else{
          this.$toast('取消成功')
        }
      },
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/afterSaleSubmit';
</style>
